<template>
  <div id="building">
    <div class="position">
      点击按钮进入答题界面~
    </div>
    <el-button @click="startAnswering">开始答题</el-button>

    <div style="width: 90%; height: 90%">

      <el-dialog v-model="this.dialog" @close="this.dialog = false" style="width: 80%; height: 80%">
        <el-table :data="this.questionData" stripe border style="width: 100%">
          <!--          <el-table-column prop="modules" label="部分" align="center" style="width:15%"></el-table-column>-->
          <el-table-column prop="num" label="题号" align="center" style="width:15%"></el-table-column>
          <el-table-column prop="questions" label="问题" align="center" style="width:30%"></el-table-column>
          <el-table-column prop="optiona" label="选项A" align="center" style="width:20%"></el-table-column>
          <el-table-column prop="optionb" label="选项B" align="center" style="width:20%"></el-table-column>
          <el-table-column label="选项" align="center" style="width:40%">

            <template #default="scope">
              <el-form :model="select" :rules="rules" ref="optionChoose">

                <el-form-item prop="theChoose">

                  <el-radio-group v-model="this.select[scope.$index]">
                    <el-radio label="A">A</el-radio>
                    <el-radio label="B">B</el-radio>
                  </el-radio-group>

                </el-form-item>

              </el-form>

            </template>

          </el-table-column>
        </el-table>
        <!--        <el-button type="primary" v-if="number!=3" @click="nextQuestions">下一页</el-button>-->
        <el-button type="success" @click="submit('optionChoose')">提交</el-button>
      </el-dialog>

      <!--      <el-dialog v-model="dialogVisible" @close="this.dialogVisible = false" append-to-body style="width: 100%; height: 100%">-->
      <el-dialog custom-class="saveAsDialog" v-model="dialogVisible" @close="this.dialogVisible = false" >

        <el-image :src="this.imagepath"></el-image>

        <!--          </img>-->
      </el-dialog>

    </div>
    <!--    </el-row>-->
  </div>
</template>

<script>
// const questionData = []
import {ElMessage} from "element-plus";
import qs from "qs";

export default {
  name: "path1",
  data() {
    const validateAnswer = (rule, value, callback) => {
      console.log("rule = ", rule, ", value = ", value)
      if (value === '') {
        callback(new Error('请选择'))
      } else {
        callback()
      }
    };
    return {

      // imagepath:require('../../image/flower.jpg'),
      imagepath:'',

      number : 0,
      E:0,
      I:0,
      S:0,
      N:0,
      T:0,
      F:0,
      J:0,
      P:0,
      resultanswer:'',
      dialogVisible: false,
      dialog: false,
      questionData: [],
      radio: false,
      // optionChoose: {
      //   user: null,
      select: [],
      // },
      rules: {
        theChoose: [
          {required: true, message: '请选择', trigger: 'blur', validator: validateAnswer}
        ]
      }
    }
  },
  created() {
    //this.initQuestions();
  },
  methods: {


    initQuestions() {
      console.log("初始化题库...");
      this.$axios.post("api/initQuestions").then(res => {
        console.log("题库：", res.data.data);

        this.questionData = res.data.data;
        console.log("题库：", this.questionData[0].amean);
      })
    },
    startAnswering() {
      this.dialog = true;
      this.initQuestions();
    },
    nextQuestions() {
      this.number++
    },
    submit() {
      let flag = true;

      //   console.log("我执行了1", flag)
      if (this.select.length < 93) {
        console.log("我执行了2", flag)
        flag = false;
      }
      console.log("我执行了1", flag)
      // }
      // if ()

      console.log("flag = ", flag);
      if (flag === true) {
        this.dialog = false;
        this.number = 0;
        // this.optionChoose.user = JSON.parse(localStorage.getItem("User2"))
        // this.optionChoose.id[0] = temp.id
        // this.optionChoose.name[0] = temp.name
        console.log("this.select = ", this.select)


        for(let j=0;j<93;j++){
          if(this.select[j] == 'A'){

            if(this.questionData[j].amean == 'E'){
              this.E ++
            }

            else if(this.questionData[j].amean == 'I'){
              this.I ++
            }

            else if(this.questionData[j].amean == 'S'){
              this.S ++
            }

            else if(this.questionData[j].amean == 'N'){
              this.N ++
            }

            else if(this.questionData[j].amean == 'T'){
              this.T ++
            }

            else if(this.questionData[j].amean == 'F'){
              this.F ++
            }

            else if(this.questionData[j].amean == 'J'){
              this.J ++
            }

            else if(this.questionData[j].amean == 'P'){
              this.P ++
            }

            else{
              console.log("出错的题",j)
            }

          }

          else if(this.select[j] == 'B'){

            if(this.questionData[j].bmean == 'E'){
              this.E ++
            }

            else if(this.questionData[j].bmean == 'I'){
              this.I ++
            }

            else if(this.questionData[j].bmean == 'S'){
              this.S ++
            }

            else if(this.questionData[j].bmean == 'N'){
              this.N ++
            }

            else if(this.questionData[j].bmean == 'T'){
              this.T ++
            }

            else if(this.questionData[j].bmean == 'F'){
              this.F ++
            }

            else if(this.questionData[j].bmean == 'J'){
              this.J ++
            }

            else if(this.questionData[j].bmean == 'P'){
              this.P ++
            }

            else{
              console.log("出错的题",j)
            }

          }

          else{
            console.log("出错的题",j)
          }

        }

        console.log("测一下数量",this.E,this.I,this.S,this.N,this.T,this.F,this.P,this.J)

        if(this.E < this.I || this.E == this.I){
          this.resultanswer += 'I'
        }
        else if(this.E > this.I){
          this.resultanswer += 'E'
        }

        if(this.S < this.N || this.S == this.N){
          this.resultanswer += 'N'
        }
        else if(this.S > this.N){
          this.resultanswer += 'S'
        }

        if(this.T < this.F || this.T == this.F){
          this.resultanswer += 'F'
        }
        else if(this.T > this.F){
          this.resultanswer += 'F'
        }

        if(this.J < this.P || this.J == this.P){
          this.resultanswer += 'P'
        }
        else if(this.J > this.P){
          this.resultanswer += 'J'
        }

        console.log("测一下结果",this.resultanswer)

        if(this.resultanswer == "INFP"){
          this.dialogVisible = true
          this.imagepath = require('../../image/INFP.png')
        }

        if(this.resultanswer == "INTP"){
          this.dialogVisible = true
          this.imagepath = require('../../image/INTP.png')
        }
        //
        if(this.resultanswer == "INTJ"){
          this.dialogVisible = true
          this.imagepath = require('../../image/INTJ.png')
        }
        //
        if(this.resultanswer == "ENTP"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ENTP.png')
        }
        //
        if(this.resultanswer == "ENTJ"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ENTJ.png')
        }
        //
        if(this.resultanswer == "ENFJ"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ENFJ.png')
        }
        //
        if(this.resultanswer == "INFJ"){
          this.dialogVisible = true
          this.imagepath = require('../../image/INFJ.png')
        }
        //
        if(this.resultanswer == "ENFP"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ENFP.png')
        }
        //
        if(this.resultanswer == "ESFP"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ESFP.png')
        }
        //
        if(this.resultanswer == "ISFP"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ISFP.png')
        }
        //
        if(this.resultanswer == "ISTP"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ISTP.png')
        }
        //
        if(this.resultanswer == "ESTP"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ESTP.png')
        }
        //
        if(this.resultanswer == "ISFJ"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ISFJ.png')
        }
        //
        if(this.resultanswer == "ESFJ"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ESFJ.png')
        }
        //
        if(this.resultanswer == "ESTJ"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ESTJ.png')
        }
        //
        if(this.resultanswer == "ISTJ"){
          this.dialogVisible = true
          this.imagepath = require('../../image/ISTJ.png')
        }
        //
        //   })
        this.$axios.post("api/commitAnswer",{param1:this.select,param2:this.resultanswer}).then(res => {
          // console.log("提交的结果：", res.data.data)
          this.select = [];})
      } else {
        ElMessage.error({showClose: true, message: '请完成所有题目再提交'})
      }




      //在这里清一下数据，不然再测试会覆盖结果
      this.E = 0
      this.I = 0
      this.S = 0
      this.N = 0
      this.T = 0
      this.F = 0
      this.J = 0
      this.P = 0
      this.resultanswer = ''


      // }

      // show(res) {
      //   console.log("返回数据~")
      //   // this.$axios.post("/").then(res => {
      //   //   console.log("题库：", res.data.data);
      //   //   this.questionData = res.data.data;
      //   // })
      //
      // },

    }
  },}
</script>

<style scoped>

#building{
  background:url("../../image/question.png");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}


.position {
  margin-left: 15px;
  font-size: 30px;
  font-weight: 600;
}

/deep/ .saveAsDialog {
  width: 1200px !important;
}


</style>